<template>
    <div class="content">
        <el-form ref="ruleFormRef" :rules="rules" :model="loginModel" size="large" class="login-form-box">
            <el-form-item prop="name">
                <el-input class="login-form" clearable v-model="loginModel.name" placeholder="邮箱/手机号码/小米ID" />
            </el-form-item>
            <el-form-item prop="pwd">
                <el-input class="login-form" v-model="loginModel.pwd" placeholder="请输入密码" show-password />
            </el-form-item>
            <el-form-item>
                <el-checkbox v-model="isChecked" />
                <p class="fox">已阅读并同意小米账号 <span>用户协议</span> 和 <span> 隐私政策</span></p>
            </el-form-item>
            <el-form-item>
                <el-button :disabled="loginModel.name === '' || loginModel.pwd === ''" size="large" type="primary"
                    @click="loginHandler(ruleFormRef)" round>登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template> 
<script setup lang="ts">
import { FormRules, FormInstance, ElMessage, ElLoading } from 'element-plus';
import { reactive, ref } from 'vue';
import { useThrottleFn } from '@vueuse/core'
import { LoginApi } from '@/api'
import { useRouter } from 'vue-router';

const router = useRouter()
const isChecked = ref<boolean>(false)
const ruleFormRef = ref<FormInstance>()
const loginModel = reactive<HttpPayload.Login>({
    name: '',
    pwd: ''
})



const rules = reactive<FormRules>({
    name: [
        { required: true, message: '请输入账号！', trigger: 'blur' },
        { min: 3, max: 16, message: '请输入3-16位有效内容！', trigger: 'blur' }
    ],
    pwd: [
        { required: true, message: '请输入账号！', trigger: 'blur' },
        { min: 3, max: 16, message: '请输入3-16位有效内容！', trigger: 'blur' }
    ]
})


const loginHandler = useThrottleFn(async (ruleFormRef) => {
    if (!ruleFormRef) return
    const valid = await ruleFormRef.validate((valid: boolean, fields: Object) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
    if (!valid) return
    if (!isChecked.value) {
        ElMessage('请您同意用户协议')
        return
    } else {
        const token: string = await LoginApi.login(loginModel)
        sessionStorage.setItem('token', token)
        sessionStorage.setItem('user', loginModel.name)
        //等待时间
        const loadingInstance = ElLoading.service({ text: "loading..", background: 'rgba(0,0,0,0.5)' })
        await new Promise((resolve: any): void => {
            setTimeout((): void => {
                loadingInstance.close()
                ElMessage({
                    message: '登录成功',
                    type: 'success',
                })
                router.replace({ name: 'Home' })
                resolve()
            }, 1000)
        })
    }
}, 3000)

</script>
<style scoped lang='stylus'>
.content
    padding 0 1.388889rem

.el-checkbox
    margin-right: 0.555556rem !important;

.fox
    color rgba(0,0,0,0.6)
    font-size 0.694444rem

.fox span
    color:#0B84FF
    
.el-button
    width 319px
    height 48px


</style>
